<template>
    <div class="service-tidings">
        <c-wrap title="我的消息">
            <mt-loadmore ref="loadmore" :bottom-method="loadBottom" :bottom-all-loaded="allLoaded"
                         @bottom-status-change="loadMore">
                <div v-if="data.length>0" :style="{height:height+'px','overflow-y':'auto'}">
                    <div class="cell" v-for="(item, index) in data" :key="index">
                        <p style="opacity: 0.5;font-size: 14px">{{item.time}}</p>
                        <div @click="click(item)">
                            <mt-cell>
                                <div slot="title">
                                    <span :style="{'background-color': item.status===1?'mediumseagreen':'red'}"
                                          class="status">{{item.status===1?'已读':'未读'}}</span>
                                    <span>{{item.title}}</span>
                                </div>
                            </mt-cell>
                            <mt-cell :title="item.content" :label="item.remark"></mt-cell>
                        </div>
                    </div>
                </div>
                <div v-else :style="{height:height+'px','line-height':height+'px'}">暂无数据</div>
            </mt-loadmore>
        </c-wrap>
    </div>
</template>
<script>
    import CWrap from '../../components/CWrap'

    export default {
        components: {CWrap},
        data() {
            return {
                height: app.config.setting.height.display - app.config.setting.height.top,
                allLoaded: false,
                pageSize: 10,
                total: 0,
                data: []
            }
        },
        methods: {
            loadData() {
                this.data = [];
                app.ajax.get(app.config.api.business.message, {
                    pageNum: 1,
                    pageSize: this.pageSize
                }, (res) => {
                    res.list.forEach((val) => {
                        this.data.push({
                            time: app.util.formatDate(val.createTime, 'yyyy-MM-dd hh:mm:ss'),
                            title: val.title,
                            content: val.content,
                            remark: val.remark,
                            id: val.id,
                            status: val.status
                        })
                    })
                })
            },
            click(item) {
                app.ajax.put(app.config.api.business.status, {
                    id: item.id
                }, (res) => {
                    this.loadData();
                })
            },
            loadBottom() {
                setTimeout(() => {
                    document.getElementsByClassName('mint-loadmore-bottom')[0].setAttribute('style', 'display:none')
                }, 2000);
                if (this.pageSize <= this.total) {
                    this.pageSize += 10;
                    this.loadData();
                } else {
                    // this.allLoaded = true;// 若数据已全部获取完毕

                    this.$toast('数据已全部获取完毕！')
                }
            },
            loadMore(status) {
                this.$nextTick(() => {
                    document.getElementsByClassName('mint-loadmore-bottom')[0].setAttribute('style', 'display:block');
                });
            }
        },
        mounted() {
            this.loadData();
        }
    }
</script>
<style>
    .service-tidings .cell {
        width: 90%;
        margin: 0 5%;
    }

    .service-tidings .mint-cell-wrapper {
        background-image: none;
    }

    .service-tidings .cell .mint-cell:last-child .mint-cell-title {
        font-size: 14px;
        color: #888;
    }

    .service-tidings .mint-cell-label {
        text-align: right;
        margin: 10px 0;
        font-size: 14px;
    }

    .service-tidings .cell .mint-cell {
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
    }

    .service-tidings .cell .mint-cell:last-child {
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        border-bottom-right-radius: 10px;
        border-bottom-left-radius: 10px;
    }

    .service-tidings .status {
        color: white;
        font-size: 14px;
        padding: 2px 5px;
        border-radius: 5px
    }
</style>
